<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2350300097 万朗</title>
    <link rel="stylesheet" href="./css/dataTable.css">
    <style>
        .form-container {
            max-width: 600px;
            margin: 40px auto;
            padding: 30px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .form-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
            color: #333;
            border-bottom: 3px solid #ffc107;
            padding-bottom: 10px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }
        
        .form-group input,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        
        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #ffc107;
            box-shadow: 0 0 0 3px rgba(255,193,7,0.1);
        }
        
        .form-buttons {
            display: flex;
            gap: 10px;
            margin-top: 30px;
        }
        
        .form-buttons button {
            flex: 1;
            padding: 12px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-submit {
            background-color: #ffc107;
            color: #212529;
        }
        
        .btn-submit:hover {
            background-color: #e0a800;
        }
        
        .btn-cancel {
            background-color: #6c757d;
            color: white;
        }
        
        .btn-cancel:hover {
            background-color: #545b62;
        }
        
        .success-message {
            display: none;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            border-radius: 4px;
        }
        
        .error-message {
            display: none;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-container">
            <div class="form-title">编辑记录</div>
            
            <div id="successMessage" class="success-message"></div>
            <div id="errorMessage" class="error-message"></div>
            
            <form id="editForm">
                <input type="hidden" id="id" name="id">
                
                <div class="form-group">
                    <label for="name">姓名 <span style="color: red;">*</span></label>
                    <input type="text" id="name" name="name" required placeholder="请输入姓名">
                </div>
                
                <div class="form-group">
                    <label for="number">性别 <span style="color: red;">*</span></label>
                    <select id="number" name="number" required>
                        <option value="">请选择性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="price">身份信息 <span style="color: red;">*</span></label>
                    <input type="text" id="price" name="price" required placeholder="如：学生、教师、工程师等">
                </div>
                
                <div class="form-group">
                    <label for="madetime">生日 <span style="color: red;">*</span></label>
                    <input type="datetime-local" id="madetime" name="madetime" required>
                </div>
                
                <div class="form-buttons">
                    <button type="submit" class="btn-submit">保存</button>
                    <button type="button" class="btn-cancel" onclick="goBack()">返回</button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // 从URL参数获取记录ID
        const urlParams = new URLSearchParams(window.location.search);
        const recordId = urlParams.get('id');
        
        // 页面加载时获取记录数据
        window.addEventListener('load', function() {
            if (recordId) {
                loadRecord(recordId);
            }
        });
        
        function loadRecord(id) {
            fetch('/wanlang/shixun4/api/get?id=' + id)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const record = data.data;
                        document.getElementById('id').value = record.id;
                        document.getElementById('name').value = record.name;
                        document.getElementById('number').value = record.number;
                        document.getElementById('price').value = record.price;
                        document.getElementById('madetime').value = formatDateTimeForInput(record.madetime);
                    } else {
                        showError('加载记录失败');
                    }
                })
                .catch(error => {
                    showError('请求失败：' + error.message);
                });
        }
        
        function formatDateTimeForInput(dateTimeStr) {
            if (!dateTimeStr) return '';
            const date = new Date(dateTimeStr);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day}T${hours}:${minutes}`;
        }
        
        document.getElementById('editForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = {
                id: document.getElementById('id').value,
                name: document.getElementById('name').value,
                number: document.getElementById('number').value,
                price: document.getElementById('price').value,
                madetime: document.getElementById('madetime').value
            };
            
            fetch('/wanlang/shixun4/api/update', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showSuccess('记录更新成功！');
                    setTimeout(() => {
                        window.location.href = 'index.jsp';
                    }, 1500);
                } else {
                    showError(data.message || '更新失败，请重试');
                }
            })
            .catch(error => {
                showError('请求失败：' + error.message);
            });
        });
        
        function showSuccess(message) {
            const msg = document.getElementById('successMessage');
            msg.textContent = message;
            msg.style.display = 'block';
        }
        
        function showError(message) {
            const msg = document.getElementById('errorMessage');
            msg.textContent = message;
            msg.style.display = 'block';
        }
        
        function goBack() {
            window.location.href = 'index.jsp';
        }
    </script>
</body>
</html>

